define(function(require) {

    'use strict';

    var Backbone = require('backbone'),
        Base = require('components/pop/base'),
        template = require('text!components/pop/templates/memo.html'),
        utils = require('core/utils');

    return Base.extend({

        template: _.template(template),

        className: 'popover left popover-memo',

        events: {
            'click .js-btn-cancel': 'hide',
            'click .js-btn-confirm': 'triggerCallback',
            'keydown .js-text-placeholder': function(event) {
                if (event.keyCode === utils.keyCode.ENTER) {
                    this.triggerCallback();
                    event.preventDefault();
                }
            }
        },

        initialize: function(options) {
            Base.prototype.initialize.call(this, options);
            this.data = options.data;
        },

        render: function() {
            var view = this;
            if (!this.data.maxLength) {
                this.data.maxLength = 15;
            }
            this.$el.html(this.template(this.data));
            view.txt = view.$el.find('.js-text-placeholder');

            return view;
        },

        reset: function(obj) {
            var callback = obj.callback,
                target = obj.target,
                trigger = obj.trigger,
                className = obj.className || 'popover left',
                data = obj.data;

            this.options.className = className;
            this.setCallback(callback);
            this.setTarget(target);
            this.setTrigger(trigger);
            this.clearInput();
            this.setData(data);
            this.positioning();
            this.show();
        },

        positioning: function() {
            var view = this;

            var className = view.options.className;

            view.$el.show();
            if (className.indexOf('left') !== -1) {
                view.$el.position({
                    of: view.target,
                    my: 'right center',
                    at: 'left center',
                    collision: 'none'
                });
            } else if(className.indexOf('bottom') !== -1) {
                view.$el.position({
                    of: view.target,
                    my: 'center top',
                    at: 'center bottom',
                    collision: 'none'
                });
            } else {
                view.$el.position({
                    of: view.target,
                    my: 'left center',
                    at: 'right center',
                    collision: 'none'
                });
            }

            view.el.className = view.options.className;
            view.txt.val(view.data.remark).focus();
        },

        clearInput: function() {
            var view = this;

            view.txt.val('');
        },

        setData: function(data) {

            this.data = data;
        },

        triggerCallback: function() {
            var view = this;

            var remark = $.trim(view.txt.val());
            var data = {
                remark: remark
            };
            view.callback(data);
            view.hide();
        }
    });
});
